<script setup lang="ts">
import type { PlanetResourceTreeItem } from "~components/tree/planet/types";
import UniverseTypePrice from "~components/universe-type/UniverseTypePrice.vue";
import UniverseTypeIcon from "~components/universe-type/UniverseTypeIcon.vue";
import { usePlanetTree } from "~components/tree/planet/use-planet-tree";
const model = defineModel<PlanetResourceTreeItem[]>();

const props = defineProps<{
  /**
   * 是否显示价格
   */
  showPrice?: boolean;
  /**
   * 材料等级
   */
  level: number;
}>();
const { treeRef, onCheckedChange, treeData } = usePlanetTree(model, props);
</script>

<template>
  <el-tree ref="treeRef" show-checkbox highlight-current :data="treeData" @check-change="onCheckedChange">
    <template #default="{ data }">
      <div class="flex items-center" style="line-height: 24px">
        <UniverseTypeIcon :id="data.id" />
        <UniverseTypePrice v-if="showPrice" :id="data.id" />
        <span v-else
          >{{ data.label }} <span v-if="data.quantity > 1">({{ data.quantity }})</span>
        </span>
      </div>
    </template>
  </el-tree>
</template>

<style scoped lang="scss"></style>
